<template>
    <view class="myPage bgF5" :style="{ '--color': color, '--total-height': totalHeight + 'px' }">
        <status-bar :title="tabTitle" back="0" :showSetting="vid ? 1 : 0" v-if="!pageSet.immerse || toTop"></status-bar>

        <!-- 普通电商 -->
        <view
            class="top_0 auto100"
            :class="{ pTop: pageSet.immerse, thmeBg: !pageSet.topBgImg }"
            v-if="pageSet.style == 0"
            :style="{ backgroundImage: pageSet.topBgImg ? 'url(' + pageSet.topBgImg + ')' : 'none' }"
        >
            <view class="d-flex a-center white m-bot40">
                <image :src="userinfo.headimg ? $imgUrls(userinfo.headimg) : $imgUrls(logo)" mode="aspectFill" @click="toUrl('/userPage/user/userinfo')" class="avatar bor_radius m-right20"></image>
                <view class="flex-1" v-if="userinfo">
                    <view class="size32 bold ellipsis m-bot10">{{ userinfo.nickName }}</view>
                    <view class="bgwhite bor_radius_20 padding2-14 size22 thmeColor" v-if="userinfo.vipId" style="width: fit-content">{{ userinfo.vipName }}</view>
                    <view class="d-flex a-center m-top10" v-if="Result.isTeamUser != 0">
                        <text class="white size26">邀请码：{{ userinfo.sn_id }}</text>
                        <view class="size24 color_33 CopdeSnid" @click="$pop.setClip(userinfo.sn_id)">复制</view>
                    </view>
                </view>
                <view class="flex-1 size32 bold" v-else @click="showModal = true">登录/注册</view>
                <!-- <view class="text-center" @click="toSign" v-if="pageSet.showSignIn == 1">
                    <text class="iconfont icon-qiandao size40 p-left20 p-right20"></text>
                    <view class="m-top4">签到</view>
                </view> -->
                <view class="text-center" @click="toUrl('/userPage/message/messageList')" v-if="startUp.service_state == 1 && pageSet.showMessage == 1">
                    <text class="iconfont icon-conversation_icon size40 p-left20 p-right20" :class="{ unread: parseInt(userinfo.unreadMsg) }" :data-num="userinfo.unreadMsg"></text>
                    <view class="m-top4">消息</view>
                </view>
            </view>
            <!-- <view class="d-flex white m-bot40">
                <view class="text-center flex-1" @click="toUrl('/userPage/sign/integralRecord')">
                    <view class="size36 bold">{{ userinfo.sign || 0 }}</view>
                    <view class="m-top10">{{ nameDefinition.fenTitle || '积分' }}</view>
                </view>
                <view class="text-center flex-1" @click="toUrl('/moneyPage/capital/myMoney')">
                    <view class="size36 bold">{{ money }}</view>
                    <view class="m-top10">{{ nameDefinition.balanceTitle || '余额' }}({{ unit }}{{ nameDefinition.balanceUnit || '元' }})</view>
                </view>
                <view class="text-center flex-1" @click="toUrl('/userPage/user/discount_coupon')">
                    <view class="size36 bold">{{ userinfo.couponCount || 0 }}</view>
                    <view class="m-top10">优惠券</view>
                </view>
                <view class="text-center flex-1" @click="toUrl('/moneyPage/capital/withdraws')" v-if="userinfo.income > 0">
                    <view class="size36 bold">{{ parseFloat(userinfo.income) }}</view>
                    <view class="m-top10">
                        可提现
                        <text class="iconfont icon-xiangyouxiayiye size22 white"></text>
                    </view>
                </view>
            </view> -->
            <!-- <view class="collect bor_radius_top20 d-flex j-sa color_f2">
				<view @click="toUrl('/userPage/user/followList')">关注 {{ userinfo.followCount || 0 }}</view>
				<view @click="toUrl('/userPage/user/CollectList')">收藏 {{ userinfo.collectCount || 0 }}</view>
				<view @click="toUrl('/userPage/user/viewed')">足迹 {{ footprint }}</view>
			</view> -->
            <!-- 会员 -->
            <view class="gradeDian bg33 bor_radius_top20 color_FC0">
                <view class="wh p-left20 d-flex f-column j-centert p-re" v-if="userinfo">
                    <view class="row a-center j-sb f-nowrap" v-if="Result.myData.sharer_appid">
                        <view class="d-flex a-center">
                            <view class="tirle f-shrink-0" v-if="Result.myData.task_title">{{ Result.myData.task_title }}</view>
                            <text class="tininfo ellipsis">{{ Result.myData.task_text }}</text>
                        </view>
                        <view class="Bindbox" @click="btn_operate" v-if="Result.myData.btn_title">{{ Result.myData.btn_title }}</view>
                    </view>
                    <view class="row a-center j-sb f-nowrap" v-else>
                        <view class="d-flex a-center flex-1">
                            <view class="tirle f-shrink-0" v-if="Result.myData.task_title">{{ Result.myData.task_title }}</view>
                            <text class="flex-1 tininfo ellipsis">{{ Result.myData.task_text }}</text>
                        </view>
                        <view class="Bindbox" @click="btn_operate" v-if="Result.myData.btn_title">{{ Result.myData.btn_title }}</view>
                    </view>

                    <!--  <view class="m-bot10">{{ userinfo.vipName }}#f8d7b4</view>
                    <view class="size40">{{ userinfo.sn_id }}</view>
                    <view class="right p-ab" @click="toUrl('/userPage/user/introduce?type=1&title=' + configJson.entrance_name, false)" v-if="configJson.content">
                        <text>{{ configJson.entrance_name }}</text>
                        <text class="iconfont icon-xiangyouxiayiye h6 color_FC0"></text>
                    </view> -->
                    <!-- <view class="up padding10-30 white bold p-ab" v-if="userinfo.nextLevel && userinfo.nextLevel.vipPrice > 0" @click="toUrl('/pages/Vip/Vip')">
                        升级{{ userinfo.nextLevel.vipName }}会员
                    </view> -->
                </view>
                <view class="wh flexac size26" v-else @click="showModal = true">点击登录获取会员权益</view>
            </view>
        </view>

        <!-- 餐饮 -->
        <view class="top_1 p-re" v-if="pageSet.style == 1">
            <view
                class="back auto100 p-ab p-top30"
                :style="{ backgroundImage: pageSet.topBgImg ? 'url(' + pageSet.topBgImg + ')' : 'none' }"
                :class="{ pTop: pageSet.immerse, thmeBg: !pageSet.topBgImg }"
            >
                <view class="text-right white p-right24">
                    <text class="iconfont icon-qiandao size44" @click="toSign" v-if="pageSet.showSignIn == 1"></text>
                    <text
                        class="iconfont icon-conversation_icon size44 m-left30"
                        :class="{ unread: parseInt(userinfo.unreadMsg) }"
                        :data-num="userinfo.unreadMsg"
                        @click="toUrl('/userPage/message/messageList')"
                        v-if="startUp.service_state == 1 && pageSet.showMessage == 1"
                    ></text>
                </view>
            </view>
            <view class="card bgwhite zIndex">
                <image :src="userinfo.headimg ? $imgUrls(userinfo.headimg) : $imgUrls(logo)" mode="aspectFill" @click="toUrl('/userPage/user/userinfo')" class="bulge bgwhite bor_radius p-ab"></image>
                <view class="flexac m-bot24" v-if="userinfo">
                    <view class="size32 bold">{{ userinfo.nickName }}</view>
                    <view class="bgFC3 bor_radius_10 padding2-14 size22 m-left10 f-shrink-0" v-if="userinfo.vipId">
                        {{ userinfo.vipName }}
                    </view>
                </view>
                <view class="size32 bold m-bot24 text-center" v-else @click="showModal = true">登录/注册</view>
                <view class="color_66 m-bot24 text-center" v-if="userinfo.nextLevel && userinfo.nextLevel.vipPrice > 0" @click="toUrl('/pages/Vip/Vip')">
                    <text>升级获得{{ userinfo.nextLevel.vipName }}会员权益</text>
                    <text class="iconfont icon-xiangyouxiayiye h6 color_66"></text>
                </view>
                <view class="d-flex a-center m-bot24">
                    <view class="flex-1 flexac" @click="toUrl('/moneyPage/capital/myMoney')">
                        <image :src="imgUrl + 'Uploads/diy/userCenter/balance.png'" mode="widthFix" style="width: 90rpx"></image>
                        <view class="m-left20">
                            <view class="h7">
                                <text class="size42">{{ money }}</text>
                                {{ unit }}{{ nameDefinition.balanceUnit || '元' }}
                            </view>
                            <view class="color_66 m-top4">{{ nameDefinition.balanceTitle || '余额' }}</view>
                        </view>
                    </view>
                    <view class="line bgdd"></view>
                    <view class="flex-1 flexac" @click="toUrl('/userPage/user/discount_coupon')">
                        <image :src="imgUrl + 'Uploads/diy/userCenter/coupon.png'" mode="widthFix" style="width: 90rpx"></image>
                        <view class="m-left20">
                            <view class="h7">
                                <text class="size42">{{ userinfo.couponCount || 0 }}</text>
                                张
                            </view>
                            <view class="color_66 m-top4">优惠券</view>
                        </view>
                    </view>
                </view>
                <view class="bgF5 bor_radius_10 d-flex a-center" style="height: 132rpx">
                    <view class="w-25 text-center" @click="toUrl('/userPage/sign/integralRecord')">
                        <view class="size42">{{ userinfo.sign > 9999 ? '9999+' : userinfo.sign || 0 }}</view>
                        <view class="color_66 m-top4">{{ nameDefinition.fenTitle || '积分' }}</view>
                    </view>
                    <view class="w-25 text-center" @click="toUrl('/userPage/user/CollectList')">
                        <view class="size42">{{ userinfo.collectCount || 0 }}</view>
                        <view class="color_66 m-top4">收藏</view>
                    </view>
                    <view class="w-25 text-center" @click="toUrl('/userPage/user/followList')">
                        <view class="size42">{{ userinfo.followCount || 0 }}</view>
                        <view class="color_66 m-top4">关注</view>
                    </view>
                    <view class="w-25 text-center" @click="toUrl('/userPage/user/viewed')">
                        <view class="size42">{{ footprint }}</view>
                        <view class="color_66 m-top4">足迹</view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 京东 -->
        <view class="top_2 auto100" :class="{ pTop: pageSet.immerse }" :style="{ backgroundImage: pageSet.topBgImg ? 'url(' + pageSet.topBgImg + ')' : 'none' }" v-if="pageSet.style == 2">
            <view class="d-flex p-left6 p-right6 m-bot24">
                <image :src="userinfo.headimg ? $imgUrls(userinfo.headimg) : $imgUrls(logo)" mode="aspectFill" @click="toUrl('/userPage/user/userinfo')" class="avatar bor_radius m-right20"></image>
                <view class="flex-1">
                    <view class="d-flex a-center f-wrap m-bot10" v-if="userinfo">
                        <view class="size34 bold">{{ userinfo.nickName }}</view>
                        <view class="bgFC3 bor_radius_10 padding2-14 size22 m-left10" v-if="userinfo.vipId">{{ userinfo.vipName }}</view>
                    </view>
                    <view class="size34 bold m-bot10" v-else @click="showModal = true">登录/注册</view>
                    <view class="size28" @click="toUrl('/moneyPage/capital/myMoney')">
                        {{ nameDefinition.balanceTitle || '余额' }} ￥{{ money }}
                        <text class="h7">{{ unit }}{{ nameDefinition.balanceUnit || '元' }}</text>
                    </view>
                </view>
                <text class="iconfont icon-qiandao size44" @click="toSign" v-if="pageSet.showSignIn == 1"></text>
                <text
                    class="iconfont icon-a-zu1870 size44 m-left30"
                    :class="{ unread: parseInt(userinfo.unreadMsg) }"
                    :data-num="userinfo.unreadMsg"
                    @click="toUrl('/userPage/message/messageList')"
                    v-if="startUp.service_state == 1 && pageSet.showMessage == 1"
                ></text>
            </view>
            <view class="p-re m-bot24" v-if="userinfo.nextLevel && userinfo.nextLevel.vipPrice > 0">
                <image :src="imgUrl + 'Uploads/diy/userCenter/vipImg.png'" mode="widthFix"></image>
                <view class="up d-flex a-center white bold p-ab" @click="toUrl('/pages/Vip/Vip')">
                    <text class="m-right10">升级会员</text>
                    <text class="iconfont icon-a-RectangleCopy size16"></text>
                </view>
                <view class="next wh d-flex a-center p-ab">
                    <view class="size28 m-top20 f-shrink-0">{{ userinfo.nextLevel.vipName }}</view>
                    <view class="size26 ellipsis_2">{{ userinfo.nextLevel.vipInfo }}</view>
                </view>
            </view>
            <view class="bgwhite bor_radius_10 d-flex a-center" style="height: 132rpx">
                <view class="w-20 text-center" @click="toUrl('/userPage/sign/integralRecord')">
                    <view class="size42">{{ userinfo.sign > 9999 ? '9999+' : userinfo.sign || 0 }}</view>
                    <view class="size26 color_66 m-top10">{{ nameDefinition.fenTitle || '积分' }}</view>
                </view>
                <view class="w-20 text-center" @click="toUrl('/userPage/user/discount_coupon')">
                    <view class="size42">{{ userinfo.couponCount || 0 }}</view>
                    <view class="size26 color_66 m-top10">优惠券</view>
                </view>
                <view class="w-20 text-center" @click="toUrl('/userPage/user/CollectList')">
                    <view class="size42">{{ userinfo.collectCount || 0 }}</view>
                    <view class="size26 color_66 m-top10">收藏</view>
                </view>
                <view class="w-20 text-center" @click="toUrl('/userPage/user/followList')">
                    <view class="size42">{{ userinfo.followCount || 0 }}</view>
                    <view class="size26 color_66 m-top10">关注</view>
                </view>
                <view class="w-20 text-center" @click="toUrl('/userPage/user/viewed')">
                    <view class="size42">{{ footprint }}</view>
                    <view class="size26 color_66 m-top10">足迹</view>
                </view>
            </view>
        </view>

        <!-- 淘宝 -->
        <view
            class="top_3 auto100 p-top40"
            :class="{ pTop: pageSet.immerse, bgwhite: !pageSet.topBgImg }"
            v-if="pageSet.style == 3"
            :style="{ backgroundImage: pageSet.topBgImg ? 'url(' + pageSet.topBgImg + ')' : 'none' }"
        >
            <view class="d-flex p-left40 p-right40 m-bot30">
                <image :src="userinfo.headimg ? $imgUrls(userinfo.headimg) : $imgUrls(logo)" mode="aspectFill" @click="toUrl('/userPage/user/userinfo')" class="avatar bor_radius m-right20"></image>
                <view class="flex-1 a-self-center">
                    <view class="d-flex a-center f-wrap m-bot10" v-if="userinfo">
                        <view class="size34 bold">{{ userinfo.nickName }}</view>
                        <view class="bgFC3 bor_radius_10 padding2-14 size22 m-left10" v-if="userinfo.vipId">{{ userinfo.vipName }}</view>
                    </view>
                    <view class="size34 bold m-bot10" v-else @click="showModal = true">登录/注册</view>
                    <view class="size28 m-bot10" v-if="Result.userInfo">{{ Result.userInfo.desensitizationPhone }}</view>
                    <view class="d-flex a-center">
                        <view class="size26" @click="toUrl('/userPage/user/followList')">关注 {{ userinfo.followCount || 0 }}</view>
                        <view class="line"></view>
                        <view class="size26" @click="toUrl('/userPage/user/CollectList')">收藏 {{ userinfo.collectCount || 0 }}</view>
                        <view class="line"></view>
                        <view class="size26" @click="toUrl('/userPage/user/viewed')">足迹 {{ footprint }}</view>
                    </view>
                </view>
                <view class="text-center" @click="toSign" v-if="pageSet.showSignIn == 1">
                    <text class="iconfont icon-qiandao size40 p-left20 p-right20"></text>
                    <view class="m-top4">签到</view>
                </view>
                <view class="text-center" @click="toUrl('/userPage/message/messageList')" v-if="startUp.service_state == 1 && pageSet.showMessage == 1">
                    <text class="iconfont icon-conversation_icon size40 p-left20 p-right20" :class="{ unread: parseInt(userinfo.unreadMsg) }" :data-num="userinfo.unreadMsg"></text>
                    <view class="m-top4">消息</view>
                </view>
            </view>
            <view class="grade padding20 white">
                <view class="d-flex a-center" v-if="userinfo.nextLevel && userinfo.nextLevel.vipPrice > 0">
                    <view class="size32 bold m-right20">{{ userinfo.nextLevel.vipName }}</view>
                    <view class="flex-1 ellipsis m-right20">{{ userinfo.nextLevel.vipInfo }}</view>
                    <view class="btn bgwhite bold" @click="toUrl('/pages/Vip/Vip')">升级会员</view>
                </view>
                <view class="d-flex a-center" v-else-if="userinfo.thisLevel">
                    <view class="size32 bold m-right20" v-if="userinfo.vipId">{{ userinfo.vipName }}</view>
                    <view class="flex-1 ellipsis m-right20">{{ userinfo.thisLevel.vipInfo }}</view>
                    <view class="btn bgwhite bold" @click="toUrl('/userPage/user/introduce?type=1&title=' + configJson.entrance_name, false)" v-if="configJson.content">
                        {{ configJson.entrance_name }}
                    </view>
                </view>
                <view class="size26 text-center" v-else @click="showModal = true">点击登录获取会员权益</view>
            </view>
            <view class="arc bgF5 d-flex a-center zIndex">
                <view class="text-center flex-1" @click="toUrl('/moneyPage/capital/myMoney')">
                    <view class="size40 color_33">{{ money }}</view>
                    <view class="size26 color_66 m-top10">{{ nameDefinition.balanceTitle || '余额' }}({{ unit }}{{ nameDefinition.balanceUnit || '元' }})</view>
                </view>
                <view class="bgdd"></view>
                <view class="text-center flex-1" @click="toUrl('/userPage/sign/integralRecord')">
                    <view class="size40 color_33">{{ userinfo.sign || 0 }}</view>
                    <view class="size26 color_66 m-top10">{{ nameDefinition.fenTitle || '积分' }}</view>
                </view>
                <view class="bgdd"></view>
                <view class="text-center flex-1" @click="toUrl('/userPage/user/discount_coupon')">
                    <view class="size40 color_33">{{ userinfo.couponCount || 0 }}</view>
                    <view class="size26 color_66 m-top10">优惠券</view>
                </view>
            </view>
        </view>

        <view class="coinCard bgwhite" v-if="userinfo.coin_show == 1">
            <view class="d-flex a-center m-bot12">
                <view class="flex-1 size30 color_33 bold">{{ userinfo.coinTitle }}</view>
                <view class="h6 color_82">{{ userinfo.coinInfo }}</view>
            </view>
            <view class="size40 color_33 m-bot12">{{ userinfo.coin }}</view>
            <u-line-progress :percentage="userinfo.coin * 100" :showText="false" :activeColor="color" height="8"></u-line-progress>
        </view>

        <!-- 组件 -->
        <view v-if="pageData.length">
            <block v-for="(item, index) in pageData" :key="index">
                <gridCard
                    v-if="item.type == 'gridCard'"
                    :pageData="item.compCont"
                    :orderCount="orderCount"
                    :Result="Result"
                    :userinfo="userinfo"
                    :configJson="configJson"
                    :task_state="task_state"
                    @showMol="showModal = true"
                    @showBusiness="Business"
                    @openModal="showModal = true"
                    @openDeposit="isDeposit = true"
                ></gridCard>
                <Bannel v-if="item.type == 'banner'" :pageData="item.compCont" :isImmerse="1"></Bannel>
                <adv v-if="item.type == 'advertisement'" :pageData="item.compCont"></adv>
                <hotZone v-if="item.type == 'hotZone'" :pageData="item.compCont"></hotZone>
                <divider v-if="item.type == 'divider'" :pageData="item.compCont"></divider>
            </block>
        </view>

        <!-- 关注公众号 -->
        <image
            :src="imgUrl + '/Uploads/singleSale/singleSaleShopH5/demoTpl/2/static/icon/WeChat.png'"
            mode="widthFix"
            class="follow_btn bor_radius"
            v-if="wxQRCode"
            @click="wxQRCode_switch = true"
        ></image>

        <!-- 弹框识别公众号 -->
        <view class="mask flexac f-column" v-if="wxQRCode && wxQRCode_switch">
            <image :show-menu-by-longpress="true" :src="$imgUrls(wxQRCode)" mode="widthFix" class="viewbox5"></image>
            <text class="iconfont icon-guanbi size60" @click="wxQRCode_switch = false"></text>
        </view>

        <Deposit :isDeposit="isDeposit" :userinfo="userinfo" @close="closeDeposit"></Deposit>
        <showModel @cancelFunc="closeModel" goHome="0" v-if="showModal" type="2" @showMol="showModal = true"></showModel>
        <contact v-if="pageSet.style != undefined"></contact>
        <tabBar :tab="2"></tabBar>

        <u-popup :show="taskShow" @close="taskShow = false" :round="10" closeable :closeOnClickOverlay="false">
            <view class="taskShowBox">
                <text class="title">绑定推荐码</text>
                <input type="text" class="taskMas" placeholder="请输入推荐码" v-model="shareCode" />
                <view class="configButn" @click="shareCodeBtn">确定</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import contact from '@/components/contact/contact.vue';
    import Deposit from '@/components/User/Deposit.vue';
    import { mapState } from 'vuex';
    import gridCard from '@/components/User/gridCard.vue';
    import Bannel from '@/components/home/Bannel.vue';
    import adv from '@/components/home/adv.vue';
    import hotZone from '@/components/home/hotZone.vue';
    import divider from '@/components/home/divider.vue';
    import Api from '@/common/Api.js';
    export default {
        components: {
            contact,
            Deposit,
            gridCard,
            Bannel,
            adv,
            hotZone,
            divider
        },
        data() {
            return {
                shareCode: '', // 推荐码
                imgUrl: this.imgUrl,
                Result: '',
                userinfo: '', // 用户信息
                configJson: '', // 会员卡信息
                orderCount: '',
                money: 0,
                unit: '',
                wxQRCode: '',
                wxQRCode_switch: false,
                signInState: '0', // 活动开启 1开启 0未开启  未开启则去旧签到功能界面
                footprint: 0, // 足迹
                isDeposit: false, // 退押金
                noPayOrde: {}, // 仓库数量
                toTop: false,
                showModal: false,
                pageSet: {
                    // 页面设置
                    immerse: true,
                    topBgImg: ''
                },
                pageData: '', // diy组件
                user_status: 0, // 0未注册 1未完成注册 2未实名 3已注册但没绑定机构 4已注册已绑定机构
                windowauth: '',
                openBusinessView: {
                    businessType: '',
                    queryString: ''
                },
                extraData: {
                    headSupplierAppid: '', // 需要填入您的机构appid
                    commissionType: 1, // 1代表机构自己分佣
                    commissionRatio: 0 // 机构自己分佣时设为0
                },
                task_state: 1, // 任务状态 推客小程序专用 1需要绑定推荐码 2需要绑定推客 3需要跳转路由 4正常显示
                taskShow: false
            };
        },
        onLoad() {
            this.diyget();
        },
        onShow() {
            this.getUserinfo();
            this.getBasicInfo();
        },
        methods: {
            btn_operate() {
                if (this.task_state == 1) return (this.taskShow = true);
                if (this.task_state == 2) return this.Business();
                if (this.task_state == 3) return this.toUrl(this.Result.myData.task_route);
            },
            shareCodeBtn() {
                if (!this.shareCodeBtn) return this.$Toast('请输入推荐码');
                this.$http
                    .post({
                        url: '/SRA_userIntegral/bindUpShareCode',
                        data: {
                            shareCode: this.shareCode,
                            VeriCode: this.bid
                        }
                    })
                    .then((res) => {
                        if (res.code != 100) return this.$Toast(res.notice);
                        this.$Toast(res.notice);
                        this.taskShow = false;
                        this.getUserinfo();
                    });
            },
            diyget() {
                this.$http
                    .get({
                        url: '/newdiy/api/v1/diy/getDiyPage',
                        data: {
                            front: 1,
                            type: 5
                        }
                    })
                    .then((res) => {
                        if (res.data) {
                            if (res.data.pageSet) {
                                this.pageSet = res.data.pageSet;
                                this.pageData = res.data.front_value || [];
                            } else {
                                // 新建了但未点保存
                                this.initSet();
                            }
                        } else {
                            // 未新建模板
                            this.initSet();
                        }
                    });
            },
            initSet() {
                // 默认配置
                this.pageSet.style = 0;
                this.pageSet.showSignIn = 1;
                this.pageSet.showMessage = 1;
                this.pageData = [
                    { type: 'gridCard', compCont: { template: 1, title: '订单中心' } },
                    { type: 'gridCard', compCont: { template: 2, title: '仓库中心' } },
                    { type: 'gridCard', compCont: { template: 4, title: '常用功能' } }
                ];
            },
            closeDeposit() {
                this.isDeposit = false;
                this.getUserinfo();
            },
            getBasicInfo() {
                this.$http
                    .post({
                        url: '/zzj_singleSaleApi/getMyOrderBasicInfo'
                    })
                    .then((res) => {
                        if (res.errcode != '100') return that.$Toast(res.msg);
                        this.noPayOrde = res.data;
                    });
            },
            toSign() {
                if (this.signInState == 1) {
                    this.toUrl('/userPage/sign2/sign_in');
                } else {
                    this.toUrl('/userPage/sign/sign_in');
                }
            },
            closeModel() {
                this.showModal = false;
                this.getUserinfo();
            },
            toUrl(url, flag = true) {
                // flag:是否判断vid
                if (flag && (!this.vid || this.vid == 0)) {
                    this.showModal = true;
                    return;
                }
                if (url) {
                    if (url == '/userPage/login/binding?type=1') {
                        // #ifdef MP-WEIXIN
                        this.showModal = true;
                        return;
                        // #endif
                    }
                    uni.navigateTo({
                        url: url
                    });
                }
            },
            getUserinfo() {
                // 获取用户信息
                this.$http
                    .post({
                        url: '/SRA_userIntegral/myInfo',
                        data: {
                            VeriCode: this.bid,
                            vId: this.vid
                        }
                    })
                    .then((res) => {
                        if (res.data) {
                            const myData = res.data.myData;
                            this.Result = res.data;
                            if (!myData || !myData.sharer_appid) this.getUserBindInfo();
                            if (myData && myData.task_state) this.task_state = myData.task_state;
                            this.signInState = res.data.signInState;
                            if (res.data.myJson) {
                                this.userinfo = res.data.myJson;
                                this.orderCount = res.data.myJson.order_count;
                                var m = parseFloat(res.data.myJson.money);
                                if (m > 9999) {
                                    this.unit = '万';
                                    // 保留两位小数、不四舍五入
                                    // m = (m / 10000).toFixed(2)
                                    m = Math.floor((m / 10000) * 100) / 100;
                                }
                                this.money = m;
                            }
                            if (res.data.configJson) {
                                this.configJson = res.data.configJson;
                                this.wxQRCode = res.data.configJson.wxQRCode; // 公众号二维码
                            }
                            this.getHistory();
                        } else {
                            this.userinfo = '';
                            this.orderCount = '';
                            this.money = 0;
                        }
                    });
            },
            async getUserBindInfo() {
                const requestResult = await Api.getUserBindInfo();
                if (requestResult.windowauth) this.windowauth = requestResult.windowauth;
                this.user_status = requestResult.user_status;
                if (this.user_status == 4) return;
                const result = requestResult.data;
                this.openBusinessView = {
                    businessType: result.businessType,
                    queryString: result.queryString
                };
                this.extraData = {
                    headSupplierAppid: result.extraData.headSupplierAppid,
                    commissionType: result.extraData.commissionType,
                    commissionRatio: result.extraData.commissionRatio
                };
            },
            Business() {
                if (!this.openBusinessView.businessType) {
                    console.log('businessType为空');
                    this.$Toast('未获取到正确的商家信息');
                    return;
                }
                this.$pop.openBusinessView(this.openBusinessView.businessType, this.openBusinessView.queryString, this.extraData);
            },
            getHistory() {
                // 获取足迹
                this.$http
                    .post({
                        url: '/singleSaleApi/footprint'
                    })
                    .then((res) => {
                        this.footprint = res.count || 0;
                    });
            }
        },

        computed: {
            ...mapState(['vid', 'bid', 'logo', 'nameDefinition', 'startUp', 'color', 'tabTitle', 'share', 'totalHeight'])
        },

        onPageScroll(e) {
            if (e.scrollTop > 100) {
                this.toTop = true;
            } else {
                this.toTop = false;
            }
        },
        onShareAppMessage() {
            let share = this.share;
            return {
                title: share.title,
                desc: share.desc,
                path: `/pages/index/index?share_v_id=${this.vid}&pageType=999`,
                imageUrl: `${share.imageUrl}`
            };
        }
    };
</script>

<style scoped lang="scss">
    .taskShowBox {
        width: 100%;
        padding: 0 24rpx 50rpx 24rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .title {
            color: #000;
            font-size: 32rpx;
            font-weight: 500;
            padding: 30rpx 0;
        }
        .taskMas {
            width: 600rpx;
            height: 100rpx;
            border: 1px solid #f1f1f1;
            padding: 0 20rpx;
            border-radius: 10rpx;
            font-size: 28rpx;
            color: #000;
            margin-top: 40rpx;
        }
        .configButn {
            width: 300rpx;
            height: 80rpx;
            background-color: var(--color);
            color: #fff;
            font-size: 30rpx;
            font-weight: 500;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 50rpx;
            border-radius: 10rpx;
        }
    }
    .CopdeSnid {
        background-color: #e6e6e6;
        padding: 2rpx 10rpx;
        margin-left: 20rpx;
        border-radius: 8rpx;
    }
    .myPage {
        min-height: 100vh;
    }

    .top_0 {
        padding: 24rpx 24rpx 0 24rpx;

        .avatar {
            width: 100rpx;
            height: 100rpx;
        }

        .collect {
            line-height: 50rpx;
            margin: 0 24rpx;
            background: #666;
        }
        .gradeDian {
            height: 100rpx;
            .tirle {
                color: #f8d7b4;
                font-size: 32rpx;
                font-weight: 500;
                position: relative;
                padding-right: 20rpx;
            }
            .tirle::after {
                content: '';
                width: 1px;
                height: 30rpx;
                background-color: #fae1c6;
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
            }
            .tininfo {
                color: #f8d7b4;
                font-size: 26rpx;
                margin-left: 20rpx;
            }
            .Bindbox {
                width: 160rpx;
                height: 66rpx;
                background-image: linear-gradient(to right, #f9e1c6 0%, #f6cc9f 100%);
                border-radius: 33rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #333;
                font-size: 30rpx;
                margin-right: 10rpx;
                font-weight: 500;
            }
        }
        .grade {
            height: 130rpx;

            .right {
                right: 20rpx;
                bottom: 20rpx;
            }

            .up {
                background: #ff6600;
                border-radius: 0 20rpx 0 20rpx;
                right: 0;
                top: 0;
            }
        }
    }

    .top_1 {
        padding: 340rpx 24rpx 0 24rpx;

        .back {
            width: 100%;
            height: 428rpx;
            top: 0;
            left: 0;
            border-radius: 0 0 50% 50%/5%;
        }

        .card {
            padding: 88rpx 24rpx 24rpx 24rpx;
            border-radius: 10rpx 10rpx 0 0;

            .bulge {
                width: 128rpx;
                height: 128rpx;
                left: 50%;
                top: -74rpx;
                margin-left: -74rpx;
                border: 10rpx solid #fff;
            }

            .line {
                width: 1rpx;
                height: 60rpx;
            }
        }
    }

    .top_2 {
        padding: 24rpx 24rpx 0 24rpx;

        .avatar {
            width: 90rpx;
            height: 90rpx;
        }

        .up {
            left: 50rpx;
            top: 8rpx;
            z-index: 10;
        }

        .next {
            left: 0;
            top: 0;
            color: #c48a40;

            > view {
                padding: 0 30rpx;

                &:first-child {
                    width: 240rpx;
                    color: #7f500a;
                }
            }
        }
    }

    .top_3 {
        .avatar {
            width: 120rpx;
            height: 120rpx;
        }

        .line {
            width: 1rpx;
            height: 20rpx;
            background: #999;
            margin: 0 20rpx;
        }

        .grade {
            background: linear-gradient(45deg, #ffae53, #fd7230);
            border-radius: 40rpx 40rpx 0 0;
            margin: 0 40rpx;
            transform: translateY(2rpx);

            .btn {
                padding: 0 18rpx;
                line-height: 42rpx;
                border-radius: 21rpx;
                color: #ff6600;
            }
        }

        .arc {
            border-radius: 50rpx 50rpx 0 0;
            padding: 40rpx 0 16rpx 0;

            .bgdd {
                width: 1rpx;
                height: 64rpx;
            }
        }
    }

    .pTop {
        padding-top: var(--total-height);
    }

    .auto100 {
        background-size: 100% auto;
        background-repeat: no-repeat;
    }

    .follow_btn {
        width: 80rpx;
        height: auto;
        background: rgba(0, 0, 0, 0.4);
        position: fixed;
        right: 24rpx;
        bottom: calc(150rpx + constant(safe-area-inset-bottom));
        bottom: calc(150rpx + env(safe-area-inset-bottom));
        z-index: 30;
    }

    .viewbox5 {
        height: auto;
    }

    .avatar {
        box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
    }
    .coinCard {
        padding: 24rpx;
        margin: 24rpx;
        border-radius: 12rpx;
    }
</style>
